<template>
    <div>

        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="search">
                    <el-form-item label="班级名称">
                      <el-input v-model="search.className"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-dialog :title="title" :visible.sync="dialogFormVisible">
          <el-form :model="addClass">
            <el-form-item label="班级名称" :label-width="formLabelWidth">
              <el-input v-model="addClass.className" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" v-if="this.title == '新增'" @click="add">确 定</el-button>
            <el-button type="primary" v-else @click="update">修改</el-button>
          </div>
        </el-dialog>
        <el-row>
            <el-col :span="24">
                        <el-button type="primary" @click="openlog">添加</el-button>
                <el-table :data="tableData" height="550">

                   <el-table-column prop="id" label="Id"></el-table-column>
                   <el-table-column prop="className" label="班级名称"></el-table-column>
                   <el-table-column prop="classWord" label="班级口令"></el-table-column>
                   <el-table-column prop="peopleNum" label="班级人数"></el-table-column>
                   <el-table-column prop="createTime" label="创建时间"></el-table-column>
                   <el-table-column label="操作" width="200px">
                     <template slot-scope="scope">
                    <el-button type="text" @click="delTbClassById(scope.row)" >删除</el-button> 
                               <el-button type="text" @click="getTbClass(scope.row)">编辑</el-button>
                     </template>
                   </el-table-column>
                 </el-table>
                <!-- 分页 -->
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 4, 6, 8]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total" style="float:right">
                  </el-pagination>
                </div>
            </el-col>
        </el-row> 
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data(){
        return{
            tableData:[],
            dialogFormVisible:false,
            search:{
                className:""
            },
            title:"",
            addClass:{
                "className": "",
                "classWord": "",
                "createTime": "",
                "id": 0,
                "modifyTime": "",
                "peopleNum": 0
            },
            formLabelWidth:"120rpx",
            pageNum:1,
            pageSize:2,
            total:null
        }
    },
    created(){
        this.initTable()
    },
    methods:{
        onSubmit(){
            this.initTable()
        },

        //分页
        handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.initTable();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
           this.initTable()
        },

        initTable(){
            axios.post("/api/tbclass/findTbClassList?pageNum="+this.pageNum+'&pageSize='+this.pageSize,this.search).then(res=>{
                this.tableData = res.data.data.items
                this.total = res.data.data.total
            })
        },
        delTbClassById(row){
            axios.delete("/api/tbclass/delTbClassById?id="+row.id).then(res=>{
                this.$message({
                  message:res.data.message,
                  type: 'success'
                });
                this.initTable()
            })
        },
        openlog(){
            this.dialogFormVisible = true
            this.title = "新增"
        },
        add(){
            axios.post("/api/tbclass/addTbClass",this.addClass).then(res=>{
                this.$message({
                  message:res.data.message,
                  type: 'success'
                });
                this.initTable()
            })
        },
        getTbClass(row){
            this.dialogFormVisible = true
            this.title = "修改"
            this.addClass =row
        },
        update(){
            axios.post("/api/tbclass/upTbClass",this.addClass).then(res=>{
                this.$message({
                  message:res.data.message,
                  type: 'success'
                });
                this.initTable()
            })
        }
    }
    
}
</script>
<style scoped>

</style>